<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例一：天猫产品列表</title>
    <style type="text/css">
        *{margin: 0; padding: 0;}
        html{height: 100%}
        body{backgroud:#f5f5f5; font-family: "Microsoft YaHei"}
        .wrap {width: 1200px;}
        .wrap li {display: inline-block;width: 236px; height: 220px; background: #fff}
        .wrap li .text-box{padding-top: 20px; padding-left: 20px;}
        .wrap li .text-box .tit {font-size: 18px; text-decoration: none;color: #000;}
        .wrap li .text-box .nav-tit {font-size: 14px;color: #64c333}
        .wrap li img {width: 154px;}
        .wrap li .img-box {text-align: right}
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <div class="text-box">
                <a href="javascript:void(0)" class="tit" title="抱抱果新首发">抱抱果新首发</a>
                <p class="nav-tit">抱一下就幸福</p>
            </div>
            <div class="img-box">
                <img src="images/1.jpg" alt="抱抱果新首发" title="抱抱果新首发">
            </div>
        </li>
        <li>
            <div class="text-box">
                <a href="#" class="tit" title="天猫冰冰冰箱节">天猫冰冰冰箱节</a>
                <p class="nav-tit" title="智由随风">智由随风</p>
            </div>
            <div class="img-box">
                <img src="images/2.jpg" alt="天猫冰冰冰箱节" title="抱抱果新首发">
            </div>
        </li>
        <li>
            <div class="text-box">
                <a href="#" class="tit" title="西门子全球精选">西门子全球精选</a>
                <p class="nav-tit">旗舰新品享你所想</p>
            </div>
            <div class="img-box">
                <img src="images/3.jpg" alt="西门子全球精选" title="西门子全球精选">
            </div>
        </li>
        <li>
            <div class="text-box">
                <a href="#" class="tit" title="进口葡萄酒专场">进口葡萄酒专场</a>
                <p class="nav-tit">原瓶进口品质保证</p>
            </div>
            <div class="img-box">
                <img src="images/4.jpg" alt="进口葡萄酒专场">
            </div>
        </li>
        <li>
            <div class="text-box">
                <a href="#" class="tit" title="手机专场">手机专场</a>
                <p class="nav-tit">天天搞机</p>
            </div>
            <div class="img-box">
                <img src="images/5.jpg" alt="手机专场" title="手机专场">
            </div>
        </li>

    </ul>
</div>
</body>
</html>